<template>
    <div class="title">组合式应用程序接口(CompositionAPI)</div>
    <div class="unitBar">
        <span>双向绑定 v-model</span>
    </div>
    <div class="vmodel inner">
        <span>初始金额&nbsp;:</span><span>{{ numAmount }}</span>
        <input type="text" v-model="numAmount">
        <button @click="addnumAmount">执行一个函数使numAmount变量的值++</button>
    </div>
    <hr>
    <div class="unitBar">
        <span>v-for</span>
        <span>显示全部公司</span>
    </div>
    <div class="unitBar">
        <table class="vforTable">
            <tr>
                <th>编号</th>
                <th>Name</th>
                <th>国家</th>
                <th>URL</th>
            </tr>
            <tr v-for="jsonitem in Arraycompanies" :key="jsonitem.id">
                <td>{{ jsonitem.id }}</td>
                <td>{{ jsonitem.name }}</td>
                <td>{{ jsonitem.state }}</td>
                <td>{{ jsonitem.url }}</td>
            </tr>
        </table>
    </div>
    <hr>
    <div class="unitBar">
        <span>筛选中国公司-filter</span>
    </div>
    <div class="unitBar">
        <table class="vforTable">
            <tr>
                <th>编号</th>
                <th>Name</th>
                <th>国家</th>
                <th>URL</th>
            </tr>
            <tr v-for="jsonitem in ArrayFuncompanies()" :key="jsonitem.id">
                <td>{{ jsonitem.id }}</td>
                <td>{{ jsonitem.name }}</td>
                <td>{{ jsonitem.state }}</td>
                <td>{{ jsonitem.url }}</td>
            </tr>
        </table>
    </div>
    <div class="inner">
        <button @click="setValFunAddCompany">新增公司</button>
    </div>
</template>
<script setup>
import {ref} from 'vue'
let numAmount=ref(100);
function addnumAmount (){
    numAmount.value++;
}
let Arraycompanies=ref([
                {
                    id: 1,
                    name: 'Google',
                    url: 'http://www.google.com',
                    state: 'USA'
                },
                {
                    id: 2,
                    name: 'Baidu',
                    url: 'http://www.baidu.com',
                    state: 'PRC'
                },
                {
                    id: 3,
                    name: 'Tencent',
                    url: 'http://www.tencent.com',
                    state: 'PRC'
                },
                {
                    id: 4,
                    name: 'ByteDance',
                    url: 'http://www.bytedance.com',
                    state: 'PRC'
                },
                {
                    id: 5,
                    name: 'Microsoft',
                    url: 'http://www.microsoft.com',
                    state: 'USA'
                },
                {
                    id: 6,
                    name: 'Alibaba',
                    url: 'http://www.alibaba.com',
                    state: 'PRC'
                },
            ])
function ArrayFuncompanies(){
  let resultArray=  Arraycompanies.value.filter((item)=>{
        return item.state==='PRC'
    })
    return resultArray;
}
ArrayFuncompanies();
function setValFunAddCompany(){
    Arraycompanies.value.push({
                    id: 7,
                    name: 'Apple',
                    url: 'http://www.apple.com',
                    state: 'USA'
                },
                {
                    id: 8,
                    name: 'DJT',
                    url: 'http://www.djt.com',
                    state: 'PRC'
                })
}
setValFunAddCompany();
</script>
<style scoped>

.vmodel>input {
    display: block;
    outline: none;
    margin-top: 10px;
}

button {
    display: block;
}

hr {
    border: 0;
}

.vforTable {
    width: 500px;
    text-align: center;
}
</style>